Перейти к основному содержимому

1.16. Вектор и растр

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ
Всем

Вектор и растр​

Компьютерная графика — это совокупность методов и средств, позволяющих создавать, хранить, обрабатывать и отображать изображения с использованием вычислительной техники. На практике почти все визуальные объекты, с которыми сталкивается пользователь в цифровой среде — от иконок и интерфейсов до фотографий и анимаций — строятся на основе двух фундаментальных принципов представления изображений: растрового и векторного. Эти принципы различаются технической реализацией, областью применимости, ограничениями, а также логикой взаимодействия с ними на этапах разработки, редактирования и отображения.

1. Растровая графика: изображение как сетка дискретных элементов​

1.1. Основной принцип​

Растровое изображение — это двумерный массив, в котором каждый элемент массива соответствует одной точке изображения, называемой пикселем (от picture element). Таким образом, изображение представляется в виде прямоугольной сетки, упорядоченной по строкам и столбцам. Каждый пиксель кодирует информацию о цвете, а в некоторых случаях — и о прозрачности.

В памяти компьютера такое изображение хранится в виде битовой или байтовой последовательности, где каждый пиксель занимает фиксированное количество бит в зависимости от используемой цветовой модели. При отображении на устройстве (мониторе, принтере, проекторе) пиксели выводятся строго в заданном порядке, и конечное визуальное впечатление зависит от физического разрешения устройства, а также от соотношения между логическим разрешением изображения и физическим разрешением вывода.

1.2. Цветовое представление​

Наиболее распространённая модель — RGB (Red, Green, Blue), в которой цвет каждого пикселя определяется тремя компонентами: интенсивностью красного, зелёного и синего каналов. В классическом 24-битном варианте каждому каналу отводится по 8 бит, что даёт 256 градаций на канал и около 16,7 миллионов уникальных цветовых комбинаций.

Важным расширением является альфа-канал (A), добавляющий четвёртый компонент — степень прозрачности пикселя. Такой формат обозначается как RGBA и позволяет создавать изображения с плавными переходами от непрозрачной части к прозрачной, что критично, например, для иконок с закруглёнными краями или сложных композитных сцен.

Другие модели — CMYK (используется в полиграфии), HSV/HSL (удобна для ручной настройки оттенков), YUV/YCbCr (оптимизирована для видеокодеков) — также могут применяться, но при хранении в растровом виде обычно преобразуются либо в RGB, либо в промежуточные формы, совместимые с целевой платформой.

1.3. Разрешение и плотность​

Разрешение растрового изображения — это количество пикселей по горизонтали и вертикали (например, 1920×1080). Чем выше разрешение, тем больше деталей может быть зафиксировано, но одновременно растёт объём данных.

При этом важно различать абсолютное разрешение (в пикселях) и относительную плотность, такую как PPI (pixels per inch) или DPI (dots per inch). Первое — техническая характеристика устройства вывода, второе — условная метрика, применяемая в печати и макетировании.

Если растровое изображение выводится на устройство с физическим разрешением, отличным от его собственного (например, 72 PPI-картинка на 300 DPI-принтер), происходит либо интерполяция (увеличение или уменьшение количества пикселей), либо масштабирование «в лоб» — когда один пиксель изображения отображается несколькими физическими точками, что приводит к потере резкости или, наоборот, к избыточному «размазыванию».

1.4. Сжатие и форматы​

Без сжатия объём данных растрового изображения пропорционален произведению ширины, высоты и количества бит на пиксель. Для изображения Full HD (1920×1080) в 32-битном RGBA режиме это уже около 8,3 МБ в несжатом виде (1920 * 1080 * 4 = ~8,3 млн байт). Поэтому в практических системах почти повсеместно применяются алгоритмы сжатия.

Существует два основных типа:

  • Без потерь (lossless): исходные данные могут быть восстановлены точно. Примеры: PNG, GIF (для индексированных цветов), TIFF (в соответствующем режиме), WebP lossless, FLIF, AVIF lossless. Такие форматы предпочтительны для графики с чёткими границами, диаграммами, текстом и прозрачностью.

  • С потерями (lossy): часть информации отбрасывается ради уменьшения размера. Примеры: JPEG, WebP lossy, AVIF lossy. Эффективны для фотографий и изображений с плавными градиентами, но плохо справляются с резкими переходами (например, текстом на однотонном фоне), вызывая артефакты сжатия — «блочные искажения», размытость, цветовой шум.

Сжатие может быть как внутренним (встроенным в формат файла), так и внешним (например, при упаковке в ZIP-архив или при HTTP-сжатии на уровне сервера). Особенно важно учитывать это при проектировании API: передача неоптимизированных изображений увеличивает latency и потребление трафика.

1.5. Типичные ограничения растров​

  • Зависимость от масштаба: при увеличении изображения выше его исходного разрешения система вынуждена интерполировать новые пиксели. Простейшие методы (например, nearest neighbour) приводят к «лесенкам» и пикселизации; более сложные (bilinear, bicubic, Lanczos) сглаживают границы, но не восстанавливают утраченную информацию.

  • Ограниченная редактируемость: растровое изображение — «плоский» объект. Чтобы изменить отдельный элемент, нужно знать его точные координаты и переписать соответствующие пиксели. Это делает трудоёмким изменение, например, цвета всех кнопок на макете без исходных слоёв (в Photoshop, Figma и т.п.).

  • Зависимость от контекста вывода: одно и то же изображение может выглядеть по-разному на экране с разной плотностью пикселей (Retina vs HD), если не предусмотрена адаптация (например, через srcset в HTML или векторные аналоги).

2. Векторная графика​

2.1. Основной принцип​

В отличие от растровой графики, где изображение фиксируется как набор дискретных значений, векторная графика описывает изображение на уровне геометрических примитивов: точек, линий, дуг, многоугольников, кривых. Каждый элемент задаётся параметрически — через координаты, углы, радиусы, уравнения кривых. Таким образом, векторное изображение — это инструкция для рендерера: «начерти окружность радиуса R с центром в (X,Y), закрась её синим, обведи чёрной линией толщиной 2».

Такой подход делает представление изображения независимым от разрешения вывода. При любом масштабе рендерер пересчитывает позиции и размеры примитивов относительно текущего контекста отображения и заново их отрисовывает. Это обеспечивает абсолютную чёткость границ при любом увеличении — вплоть до печати на широкоформатном станке, где логотип, созданный из нескольких кривых, может занимать метры без единой «лесенки».

С точки зрения данных, векторное изображение — это структурированный документ, часто текстовый (например, SVG — это XML), где каждый графический элемент представлен узлом с атрибутами. Это позволяет эффективно хранить и передавать информацию (файл логотипа из 10 объектов может весить менее 1 КБ) и манипулировать изображением как с данными: изменять цвета через CSS, анимировать координаты в JavaScript, извлекать метаданные, применять трансформации без перекодирования.

2.2. Геометрические примитивы и их параметризация​

Основные строительные блоки векторной графики включают:

  • Точка — базовый элемент, задаётся парой координат (x, y) в выбранной системе отсчёта (обычно декартовой, с началом в верхнем левом углу — как в экранной графике).
  • Прямая линия — определяется двумя точками: начальной и конечной.
  • Ломаная линия — последовательность соединённых отрезков, задаётся списком вершин.
  • Многоугольник — замкнутая ломаная, может быть выпуклым или вогнутым, с самопересечениями (например, звезда).
  • Окружность и эллипс — задаются центром и радиусами (для эллипса — два: по осям X и Y).
  • Прямоугольник и скруглённый прямоугольник — определяются позицией левого верхнего угла, шириной, высотой и, при необходимости, радиусом скругления углов.
  • Кривые — наиболее важный и выразительный класс. Наиболее распространены кривые Безье, особенно кубические (третьего порядка) и квадратичные (второго порядка). Кубическая кривая Безье описывается четырьмя точками: начальной, конечной и двумя управляющими точками, которые определяют направление и «натяжение» кривой в начале и в конце. Эти кривые позволяют точно аппроксимировать любую плавную форму — от контура буквы до силуэта автомобиля.

Современные векторные форматы также поддерживают составные пути (paths), включающие несколько подпутей, операции над формами (объединение, вычитание, пересечение — через boolean operations), заливки градиентами (линейными, радиальными), а также эффекты: тени, размытия, фильтры (например, в SVG через <filter>).

2.3. Сцена, трансформации и иерархия​

Векторное изображение часто моделирует сцену — иерархическую структуру, похожую на DOM в вебе. Элементы могут быть сгруппированы (например, <g> в SVG), к ним применяются трансформации: сдвиг (translate), поворот (rotate), масштаб (scale), искажение (skew). Трансформации накапливаются по цепочке: если группа масштабирована в 2 раза, а внутри неё элемент повёрнут на 45°, то поворот произойдёт уже в масштабированных координатах.

Это открывает мощные возможности композиции: например, иконка «шестерёнка» может быть построена как окружность с восемью зубцами, каждый из которых — повёрнутая копия одного базового элемента. При изменении радиуса окружности все зубцы автоматически пересчитываются. Такой подход лежит в основе параметрического дизайна — принципа, используемого в Figma, Adobe Illustrator, Sketch, где элементы UI (кнопки, иконки, чекбоксы) определяются переменными: padding, border-radius, icon-size, и т.п.

2.4. Форматы хранения и передачи​

Наиболее распространённый открытый формат — SVG (Scalable Vector Graphics), основанный на XML. Он поддерживается всеми современными браузерами, может быть встроен непосредственно в HTML (<svg>...</svg>), стилизован через CSS и анимирован через SMIL или JavaScript. Благодаря текстовой природе SVG легко поддаётся минификации, gzip-сжатию, генерации на лету (например, сервером на основе данных).

Другие важные форматы:

  • PDF (в векторном режиме) — содержит описания страниц с использованием языка PostScript-подобных операторов; может включать как векторные, так и растровые элементы; универсален для печати и документооборота.
  • EPS (Encapsulated PostScript) — устаревший, но до сих пор встречающийся в полиграфии; содержит PostScript-код, обёрнутый в специальную оболочку.
  • AI (Adobe Illustrator), FIG (Figma), SKETCH — проприетарные форматы, используемые в соответствующих редакторах; обычно содержат геометрию, слои, стили, прототипы взаимодействий.

В мобильной и десктопной разработке вектор часто используется в виде векторных активов — например, VectorDrawable в Android или PDF Assets в iOS/macOS. Они компилируются в бинарное представление, оптимизированное под рендеринг на конкретной платформе, но сохраняют масштабируемость.

2.5. Рендеринг: от описания к пикселям​

Важно осознавать: векторное изображение всё равно становится растровым на этапе отображения. Никакой монитор не умеет «рисовать кривые» напрямую — он выводит только сетку пикселей. Поэтому векторная графика всегда проходит этап растрирования (rasterization), выполняемого либо на CPU (в простых случаях), либо на GPU (в современных UI-фреймворках, играх, вебе через WebGL или Canvas 2D).

Процесс растрирования включает:

  1. Триангуляцию (для сложных фигур) — разбиение многоугольника на треугольники, которые легко обрабатывать графическим конвейером.
  2. Определение покрытия — для каждого пикселя вычисляется, попадает ли он внутрь фигуры (с учётом заливки, обводки, прозрачности).
  3. Антиалиасинг — сглаживание границ путём частичного заполнения пикселей на краях фигур (например, пиксель на границе круга может быть закрашен на 60 % интенсивности, оставшиеся 40 % — фоном).
  4. Применение эффектов — например, размытие тени требует свёртки с ядром фильтра, что выполняется на растровом буфере.

Ключевое преимущество векторного подхода — растрирование происходит в момент отображения, а не заранее. Это значит, что при смене масштаба, разрешения или DPI система может заново выполнить растрирование с оптимальными параметрами, тогда как у растрового изображения эти параметры зафиксированы на этапе создания.

3. Сравнительный анализ​

Выбор между вектором и растром — это вопрос соответствия задаче. Ниже приведён разбор типовых сценариев с обоснованием.

3.1. Фотореалистичные изображения​

Фотографии, сканированные изображения, цифровая живопись, рендеры 3D-сцен — все они содержат огромное количество мелких деталей, шум, плавные градиенты, тени, текстуры. Такие данные не поддаются эффективному описанию через геометрические примитивы. Попытка аппроксимировать пиксельное изображение вектором (например, через трассировку — vectorization) приводит либо к экспоненциальному росту числа кривых, либо к потере реализма.

→ Выбор: растр, предпочтительно с адаптивным сжатием (WebP, AVIF) и поддержкой альфа-канала при необходимости.

3.2. Логотипы, иконки, фирменный стиль​

Здесь важны точность передачи формы, масштабируемость, возможность изменения цветовой схемы под разные темы (светлая/тёмная), а также минимальный размер активов. Вектор позволяет:

  • использовать один файл для всех разрешений (от favicon 16×16 до баннера на билборде);
  • динамически перекрашивать элементы (например, через fill="currentColor" в SVG);
  • анимировать части изображения (вращение шестерёнки, мигание индикатора).

→ Выбор: вектор, преимущественно SVG с последующей оптимизацией (удаление metadata, сокращение десятичных знаков, inline-вставка в HTML или спрайты).

3.3. Пользовательские интерфейсы​

Современные UI-фреймворки (React, Flutter, SwiftUI, Jetpack Compose) построены на декларативном описании интерфейса, где виджеты — это параметризованные компоненты, а не изображения. Кнопка — это объект с width, height, borderRadius, backgroundColor, elevation и т.п. Это по своей сути — векторный подход.

Даже когда используются внешние иконки, предпочтение отдаётся векторным (Icon(svgPathData: "...") в Flutter, SvgPicture.asset() в пакете flutter_svg). Только в исключительных случаях (сложные иллюстрации, анимации с персонажами) подключаются растровые спрайты или Lottie-файлы (которые, к слову, тоже основаны на векторных слоях, но с временной шкалой).

→ Выбор: вектор по умолчанию, растр — по обоснованной необходимости.

3.4. Полиграфия и широкоформатная печать​

В профессиональной печати используется модель CMYK и требуются высокие разрешения (300 DPI и выше). Для изображений — фотографий — подготавливаются растровые файлы TIFF или PDF/X с встроенным растром. Но все остальные элементы — обрезочные метки, штрих-коды, тексты, линии отреза, логотипы — передаются в векторной форме. Это гарантирует:

  • отсутствие «размытости» при выводе на устройство с разрешением 2400 DPI;
  • точное позиционирование (векторные координаты могут быть заданы с микронной точностью);
  • возможность редактирования макета без пересборки.

→ Гибридный подход: вектор для формы и текста, растр — для изображений.

3.5. Анимация и интерактивность​

Векторная графика интегрируется с программными средами значительно глубже. В SVG можно:

  • изменять атрибуты (cx, cy, d) через JavaScript;
  • применять CSS-транзишены и анимации;
  • реагировать на события мыши или касания (onMouseOver, onClick);
  • использовать SMIL для декларативной анимации (хотя поддержка в браузерах ограничена, её часто заменяют на JavaScript или CSS).

Растр в этом плане пассивен: его можно двигать как целое (например, <img> с transform: translate()), но менять внутренние части без перерисовки невозможно.

→ Выбор: вектор, если требуется динамика; растр — если анимация реализована как видеопоток или серия кадров.

4. Пограничные случаи и современные гибриды​

На практике строгая граница между вектором и растром всё чаще стирается. Рассмотрим несколько технологий, где они сочетаются.

4.1. SVG с растровыми вставками​

SVG позволяет встраивать растровые изображения через <image href="..." />. Это полезно, например, при создании интерактивной карты: общий контур — вектор, а спутниковые снимки областей — растр. При масштабировании вектор остаётся чётким, а растр подгружается в нужном разрешении через tile-сервисы (как в OpenStreetMap).

4.2. Векторные шрифты (TrueType, OpenType)​

Шрифты — яркий пример векторной графики в повседневном использовании. Каждый глиф (символ) задаётся контуром, построенным из кривых Безье и прямых. При выводе текста система растрирует глифы под текущий размер, сглаживает их (с использованием hinting или subpixel rendering — ClearType), адаптирует под плотность экрана. Это позволяет использовать один файл шрифта для всех размеров — от 8 pt в примечании до 144 pt в заголовке презентации.

4.3. PDF как контейнер​

PDF-документ может содержать:

  • векторные элементы (текст, линии, диаграммы);
  • растровые изображения (фотографии, сканы);
  • шрифты (встроенные или ссылки);
  • интерактивные формы, ссылки, слои.

Он сохраняет структуру, что делает его стандартом для обмена документами. При этом PDF-ридеры могут перестраивать отображение под разные экраны (например, мобильный режим с перекомпоновкой текста в некоторых реализациях), но сами векторные примитивы при этом не теряют точности.

4.4. Canvas API и WebGL​

В вебе <canvas> предоставляет битовый буфер — по сути, это растровая поверхность. Однако на неё можно рисовать как растровые данные (drawImage()), так и векторные примитивы (lineTo(), arc(), bezierCurveTo()). В первом случае используется уже готовый растр; во втором — браузер растрирует примитивы на лету. Аналогично в WebGL: геометрия задаётся вершинами и индексами (векторно), но финальный вывод — всегда растровый фреймбуфер.

Это демонстрирует глубинную истину: все изображения в итоге становятся растром, но способ их описания до растрирования определяет гибкость, точность и эффективность.

5. Интеграция векторной и растровой графики в программные системы​

Выбор формата изображения — это не изолированное решение дизайнера. Оно формирует цепочку зависимостей в архитектуре программного продукта: от этапа разработки и сборки до доставки пользователю и рендеринга на устройстве. Ниже рассмотрены ключевые инженерные аспекты, возникающие при работе с обоими типами графики.

5.1. Управление графическими активами в проекте​

В современных проектах графические ресурсы (assets) рассматриваются как часть кодовой базы, а не как «медиафайлы на облаке». Это требует применения практик, аналогичных управлению исходным кодом:

  • Версионирование: все иконки, логотипы, иллюстрации хранятся в системе контроля версий (Git). Это позволяет отслеживать изменения, проводить ревью (например, через diff SVG), откатывать ошибки.
  • Единая точка входа: рекомендуется централизовать доступ к графике — например, через модуль assets/, содержащий подкаталоги icons/, illustrations/, logos/, с чёткой иерархией имён (icon-user.svg, illustration-onboarding-02.png). Это упрощает рефакторинг и поиск.
  • Автоматизированная обработка: в CI/CD встраиваются шаги по оптимизации:
    • для SVG — svgo (удаление метаданных, сокращение path-данных, инлайнинг стилей);
    • для PNG — pngquant, oxipng (сжатие с сохранением альфа-канала);
    • для JPEG/WebP — sharp, imagemagick (ресайз под нужные разрешения, конвертация, quality tuning).

Важный нюанс: не все оптимизаторы одинаково полезны. Например, агрессивное упрощение кривых в SVG (--precision=1) может исказить тонкие детали в логотипе. Поэтому для критичных активов (брендовые элементы) применяются строгие правила: минимальная оптимизация, ручная проверка после каждого изменения.

5.2. Доставка графики в веб-приложениях​

В вебе разница между вектором и растром проявляется особенно остро из-за разнообразия устройств и сетевых условий.

5.2.1. Вектор (SVG)​
  • Inline-вставка (<svg>…</svg> прямо в HTML) — самый эффективный способ: избегается HTTP-запрос, SVG становится частью DOM, доступен для стилизации и анимации через CSS/JS. Подходит для иконок, небольших иллюстраций (< 5–10 КБ).
  • Спрайты — объединение множества иконок в один SVG-файл с использованием <symbol id="icon-1">…</symbol>, а в основном документе — <use href="sprite.svg#icon-1"/>. Это снижает количество запросов и позволяет кэшировать спрайт на длительный срок.
  • Внешние файлы — при больших размерах (например, интерактивные диаграммы) целесообразно загружать SVG как отдельный ресурс (<img src="chart.svg"> или fetch() + DOMParser). Это изолирует графику от основного HTML и позволяет применять кэширование по ETag.

Ограничение: инлайн и спрайты не поддерживают кросс-доменную загрузку при использовании CSP без unsafe-inline или nonce/hash, что требует дополнительной настройки.

5.2.2. Растр (PNG, JPEG, WebP, AVIF)​

Здесь ключевая проблема — разрешение экрана. Устройства с Retina-дисплеями требуют изображений с удвоенной (или утроенной) плотностью пикселей (@2x, @3x), иначе картинка выглядит размытой.

Решения:

  • Атрибут srcset — позволяет браузеру выбрать наиболее подходящее изображение: 
    <img
      src="logo-1x.png"
      srcset="logo-1x.png 1x, logo-2x.png 2x, logo-3x.png 3x"
      alt="Логотип"
    />
  • Элемент <picture> — даёт полный контроль над выбором формата и разрешения: 
    <picture>
      <source type="image/avif" srcset="photo.avif" />
      <source type="image/webp" srcset="photo.webp" />
      <img src="photo.jpg" alt="Фотография" />
    </picture>
  • Адаптивный ресайз на backend — сервер возвращает изображение нужного размера в ответ на параметры запроса (например, ?w=320&h=240&f=webp). Это снижает трафик и нагрузку на клиент, но требует инфраструктурной поддержки (CDN с image processing, например, Cloudflare Images, Imgix, или self-hosted sharp-сервис).

Особое внимание — lazys loading: для изображений вне viewport используется loading="lazy", что откладывает загрузку до приближения к области просмотра. Это критично для страниц с сотнями изображений (галереи, каталоги).

5.3. Внедрение в мобильные и десктопные приложения​

Android​
  • VectorDrawable — нативный формат для векторных иконок. Поддерживается с API 21+, для старых версий — через vectorDrawables.useSupportLibrary = true. Преимущества: масштабируемость, тинтинг (app:tint), анимация через AnimatedVectorDrawable.
  • Растровые drawables (drawable-mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) — требуют подготовки 5+ версий под разные плотности. Это увеличивает размер APK и усложняет поддержку.

Современный подход — использовать VectorDrawable по умолчанию, растровые — только для фотографий или сложных иллюстраций, которые невозможно адекватно представить вектором.

iOS / macOS​
  • PDF-активы — в Xcode можно добавить PDF-файл как asset, и система автоматически генерирует растровые представления под нужные разрешения (@1x, @2x, @3x). Это избавляет от ручного управления мультиразрешениями.
  • SF Symbols — библиотека векторных иконок от Apple, интегрированная в UIKit/SwiftUI. Позволяет менять вес, стиль, цвет, размер динамически.
Flutter​
  • SvgPicture.asset() из пакета flutter_svg — де-факто стандарт для иконок.
  • Для изображений — Image.asset(), Image.network(), с поддержкой кэширования (cached_network_image).
  • Важно: flutter_svg не поддерживает все SVG-функции (фильтры, внешние шрифты, <script>), поэтому перед использованием требуется валидация и, при необходимости, ручная доработка.

6. Риски и типичные ошибки проектирования​

6.1. «Растровый анти-паттерн»: использование PNG вместо SVG​

Частая ошибка — экспортировать иконку из Figma в PNG 24×24 и использовать её во всём интерфейсе. Последствия:

  • На Retina-устройствах иконка выглядит размытой (если не подготовлены @2x, @3x);
  • Невозможно изменить цвет без генерации новой картинки (например, для disabled-состояния);
  • Увеличение размера приложения за счёт нескольких копий одного изображения;
  • Отсутствие поддержки темной/светлой темы без дублирования.

Решение: экспортировать иконки как SVG, интегрировать через спрайт или инлайн, использовать CSS-переменные или currentColor для окраски.

6.2. Перегрузка вектора​

Вектор эффективен для геометрических форм, но не для фотореалистичных сцен. Попытка конвертировать фотографию в SVG (например, через онлайн-трассировку) часто приводит к файлам по 10–50 МБ, состоящим из десятков тысяч мелких полигонов. Такие файлы:

  • Долго парсятся и растрируются;
  • Перегружают GPU при анимации;
  • Не сжимаются эффективно (SVG — текстовый, но при большом объёме gzip помогает слабо);
  • Плохо кэшируются.

Решение: использовать растровые форматы с современным сжатием (AVIF для статики, WebP для баланса совместимости/качества). Вектор — только там, где он действительно оправдан.

6.3. Игнорирование цветовых профилей и gamma-коррекции​

Растр может содержать встроенные цветовые профили (sRGB, Adobe RGB, Display P3). Если профиль не указан или обработан неверно, изображение будет выглядеть иначе на разных устройствах — например, «пересыщенным» на MacBook с P3-дисплеем.

Рекомендации:

  • Все веб-изображения должны быть в sRGB (стандарт для браузеров);
  • При экспорте из редакторов (Photoshop, Affinity) явно указывать профиль и конвертировать при сохранении;
  • Не использовать Adobe RGB или ProPhoto RGB в пользовательских интерфейсах.

6.4. Отсутствие альтернативного текста и семантики​

Изображения — часть доступности (a11y). Для растровых <img> обязателен alt; для векторных — либо aria-label, либо семантическое описание внутри SVG (<title>, <desc>):

<svg viewBox="0 0 24 24" aria-labelledby="icon-title">
  <title id="icon-title">Поиск</title>
  <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>

Пренебрежение этим нарушает требования WCAG и снижает удобство для пользователей скринридеров.

7. Перспективы и эволюция представлений​

7.1. Векторные нейросетевые представления​

Традиционные векторные форматы (SVG, PDF) основаны на явном описании примитивов. Современные исследования в области машинного обучения направлены на неявное параметрическое представление форм:

  • SPIRAL, SVG-VAE — модели, генерирующие SVG-код из изображения или латентного вектора;
  • CLIPasso — метод, аппроксимирующий изображение небольшим числом кривых Безье, обучаясь через дифференцируемый рендерер;
  • DeepSVG — архитектура, понимающая семантику SVG-элементов, позволяющая редактировать изображение через естественный язык.

Эти технологии пока не вошли в production, но они открывают путь к самооптимизирующимся графикам: изображение, которое адаптирует сложность своего описания под разрешение вывода — при 16×16 использует 3 кривые, при 4K — 200, но сохраняет единый исходный файл.

7.2. Дифференцируемый рендеринг​

Ключевая проблема классической графики — необратимость растрирования: из пикселей нельзя точно восстановить исходные кривые. Новые подходы (например, DiffVG, Neural Vector Graphics) строят рендерер как дифференцируемую функцию, позволяя оптимизировать параметры вектора под целевой растр с помощью градиентного спуска. Это может революционизировать:

  • автоматическую трассировку;
  • сжатие (хранить не растр, а параметры вектора, генерирующего «достаточно близкий» растр);
  • стилизацию (переносить художественный стиль на векторное изображение без потери масштабируемости).

7.3. NeRF и объёмная графика​

Хотя Neural Radiance Fields (NeRF) формально не относятся ни к вектору, ни к растре, они ставят под вопрос саму парадигму 2D-изображений. NeRF описывает сцену как непрерывную функцию плотности и цвета в трёхмерном пространстве. Рендеринг выполняется путём трассировки лучей с последующей выборкой этой функции. Результат — фотореалистичные изображения с произвольным ракурсом и освещением.

Связь с темой: NeRF — это попытка вернуть аналитическое описание (как у вектора), но для сложных, «негеометричных» объектов (туман, кожа, листва), где классический вектор бессилен. Возможно, будущее — в мультимодальных представлениях, где геометрия (вектор), текстура (растр) и свет (NeRF/параметрические шейдеры) объединяются в единую модель.